<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="./index.css">
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'e1b93e9730d1a02819c9d41e30a47da5',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=97e1969986cfdad21dd89813a23d5a28">
    </script>
    <script src="./js/store.js"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        let map = new AMap.Map('container', {
            center: [114.402672, 30.518987],
            zoom: 16,
            viewMode: '3D',
            pitch: 45
        })
        AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.ControlBar',
            'AMap.GeoJSON'
        ], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
        })
        console.log(JSON.stringify(getData()))

        var geojson = new AMap.GeoJSON({
            geoJSON: null, // GeoJSON对
        })

        if (JSON.stringify(getData()) != '[]') {
            geojson.importData(getData())
        }
        
        map.add(geojson)

        map.on('click', event => {
            var marker = new AMap.Marker({
                position: event.lnglat
            })
            geojson.addOverlay(marker)
            console.log(geojson);
            setData(geojson.toGeoJSON())
        })
    </script>
</body>

</html>